import React, {useState} from 'react';
import {useLocation, useNavigate} from "react-router-dom";
import {Badge, Flex, Modal, Space, Statistic, Table} from "antd";
import LogFactory from "../../../../log/LogFactory";
import {useAppSelector} from "../../../../storage/redux/hook";
import {reportDetailBoardColumns} from "../../../../columns/ReportDetailColumns";
import {ReportDetail} from "../../../../type/entity/ReportDetail";

import "./ReportDetailBoard.css";

const log = LogFactory.getLogger("ReportDetailBoard");
const ReportDetailBoard = () => {
    const _state = useLocation().state;
    const detailState = useAppSelector(state => state.reportDetail);
    const [open, setOpen] = useState<boolean>(true);
    const navigate = useNavigate();

    log.debug("render", detailState);

    const onCancel = () => {
        log.debug("onCancel");
        setOpen(false);
        navigate("..", {state: _state});
    };

    return (
        <Modal
            title={
                <>
                    <span style={{paddingRight: "5px"}}>报销单看板</span>
                    <Badge color={"green"} count={detailState.data.length}/>
                </>
            }
            open={open}
            loading={false}
            maskClosable={false}
            onCancel={onCancel}
            destroyOnClose={true}
            width={"60%"}
            footer={null}
        >

            <Flex justify={"space-between"}>
                <div className={"card-header-left"}>
                    <span className={"title"}>报销单</span>
                    <span className={"info"}>{_state.id}</span>
                </div>
                <Statistic title={"合计金额"} value={detailState.totalMoney} precision={2} suffix={"¥"}/>

                <div className={"card-header-right"}>
                    <span className={"title"}>合计金额</span>
                    <span className={"info"}>{detailState.totalMoney}</span>
                </div>
            </Flex>
            <Table<ReportDetail>
                size={"middle"}
                // summary={""}
                columns={reportDetailBoardColumns}
                dataSource={detailState.data}
                // footer={}
            />

        </Modal>
    );
};

export default ReportDetailBoard;